<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>企业</title>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>websocket</title>
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/docs.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.json-2.4.js"></script>
    <script src="js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="js/flash-websocket/swfobject.js"></script>
    <script src="js/flash-websocket/web_socket.js"></script>
    <script>
        window.console = window.console || {
            log:function(){
                //alert(JSON.stringify(arguments))
            }
        }
    </script>
    <script>

        // Set URL of your WebSocketMain.swf here:
        WEB_SOCKET_SWF_LOCATION = "js/flash-websocket/WebSocketMainInsecure.swf";
        // Set this to dump debug message from Flash to console.log:
        WEB_SOCKET_DEBUG = true;
    </script>
    <script src="js/MaoSuiWebSocket.js"></script>

</head>
<body>
<div class="jumbotron">
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <h2>
                    <small>在线列表</small>
                </h2>
                <div class="container" style="width: 100%;">
                    <div class="list-group" id="list_group">

                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-6">
                <h2>
                    <small>视频窗口</small>
                </h2>
                <div class="container" style="width: 100%;">
                    <div class="panel panel-default" >
                        <div class="panel-body">
                            <div id="myContent">
                                <h1>Alternative content</h1>
                                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                            </div>
                        </div>
                    </div>
                    <!--<div class="form-group has-success has-feedback">
                        <label class="control-label" for="message">请文明发言,勿刷屏,按回车键发送消息</label>
                        <input type="text" class="form-control" id="message" placeholder="输入你想对大家说的话">
                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var socket = new LiveServer("ws://"+location.hostname+":8080/live?uid=2&cid=701");
    socket.bind('open', function(e){
        log("连接成功...")
    });

    socket.bind('init', function(data){
        console.log('init',data)
        this.sendEvent('init', {uid:1});
    });

    socket.bind('init_success', function(t){
        this.sendEvent("getOnline");
        addMessage("初始化成功,时间:" + new Date(t).toLocaleString())
    });

    socket.bind('queue', function(data){
        if(data && $.isArray(data)){
            var html = '';
            for(var i=0;i<data.length;i++){
                html += '<a href="javascript:;" id="user_'+data[i].id+'" onclick="liveToUser('+data[i].id+')" class="list-group-item">\
                        <h4 class="list-group-item-heading">'+data[i].username+'</h4>\
                <p class="list-group-item-text">   '+new Date(data[i].lastlogintime.time).toLocaleString()+'</p>\
                </a>'
            }
            $('#list_group').html(html);
        }
        console.log(data)
    });

    socket.bind('seeker_online', function(data){
        $('<a href="javascript:;" id="user_'+data.id+'" onclick="liveToUser('+data.id+')" class="list-group-item">\
                        <h4 class="list-group-item-heading">'+data.username+'</h4>\
                <p class="list-group-item-text">   '+data.lastlogintime.time+'</p>\
                </a>').appendTo($('#list_group'));
    });

    socket.bind('seeker_offline', function(id){
        $('#user_' + id).remove();
    });

    socket.bind('agent', function(id){
       addMessage(id + "已同意面试!");
    });

    socket.bind('message', function(data){
       console.log(data);
    });

    socket.bind('close', function(e){
        log("连接已关闭","warning");
        console.log('close' ,e)
    });

    socket.bind('error', function(e){
       log("连接错误" + e)
        addMessage(e,"error")
    });

    log("连接中...");
    socket.connect();

    function liveToUser(id){
        if(socket){
            //socket.sendEvent('broadcastToUser',{toUid:id});
            socket.sendEventToUser(id, "liveInit", [1,2]);
            log("通知"+id+"中...");
        }else{
            log("未连接", 'error');
        }
    }

    // 将消息上屏
    function addMessage(msg, x, y){return;
        if(!y){
            y="success";
        }

        $('<p class="text-' + x + '">\
                   <span class="label label-' + y + '">' + msg + '</span>\
              </p>').appendTo('.panel-body');

        $log = $('.panel-body');
        $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
    }
    function log(msg, x){return;
        if(!x){
            x="success";
        }
        $log = $('.panel-body');
        var xx = $('<div class="alert alert-'+x+' alert-dismissible" role="alert">' + msg + '</div>').appendTo($log)
        setTimeout(function(){
            xx.animate({
                opacity:0
            },function(){
                xx.remove();
            });
        },1000);
        $log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
    }
</script>
<script type="text/javascript" src="js/swfJs/interview.js"></script>
<script type="text/javascript">
    var interView = new InterView("myContent");
    interView.init = function(self){
      //  alert(self)
    };
    interView.__init('js/');
</script>
</body>
</html>